<template>
  <div class="ii-wrapper" v-loading = loading>
    <div class="ii-wrap-shop-header">
      <!-- 商品查询 -->
      <div class="ii-wrap-search">
        <div class="ii-wrap-search-left">商品名称</div>
        <input class="ii-wrap-search-right" type="text" placeholder="请输入商品名称" v-model="title" />
      </div>
      <!-- 状态下拉 -->
      <div class="ii-wrap-shop-status">
        <div class="ii-wrap-status-text">状态:</div>
          <div :class="['ii-wrap-select-status',boxShow ? 'select-active' : '']" @click='showList'>
            <p>{{selectList[selectIndex].name}}</p>
            <img :class="boxShow ? 'gs-xlimg' : ''" src="~/assets/images/gs-xl.png" />
            <div class="select-status-list" v-show="boxShow">
                <div class="select-status-item" v-for="(item,index) in selectList" :key="index" @click="selectItem(item,index)" >{{item.name}}</div>
            </div>
          </div>
      </div>
      <!-- 查询按钮 -->
      <div class="ii-wrap-btn-search">
        <div class="ii-wrap-btn" @click="search">查找商品</div>
        <!-- <div class="ii-wrap-btn" @click="add">添加商品</div> -->
      </div>
    </div>
    <div class="ii-wrap-shop-content">
      <div class="ii-wrap-shop-list one">
        <div class="ii-wrap-shop-item img">
          <p>商品图片</p>
        </div>
        <div class="ii-wrap-shop-item name">
          <p>商品名称</p>
        </div>
        <div class="ii-wrap-shop-item legend">
          <p>类目</p>
        </div>
        <div class="ii-wrap-shop-item save">
          <p>库存</p>
        </div>
        <div class="ii-wrap-shop-item price">
          <p>售价</p>
        </div>
        <div class="ii-wrap-shop-item commission">
          <p>佣金</p>
        </div>
        <div class="ii-wrap-shop-item sale">
          <p>销量</p>
        </div>
        <!-- <div class="ii-wrap-shop-item status">
          <p>销售状态</p>
        </div> -->
        <div class="ii-wrap-shop-item goods-status">
          <p>商品状态</p>
        </div>
        <div class="ii-wrap-shop-item platform">
          <p>平台</p>
        </div>
        <div class="ii-wrap-shop-item account-name">
          <p>帐号</p>
        </div>
        <div class="ii-wrap-shop-item operation">
          <p>操作</p>
        </div>
      </div>
      <!-- <el-scrollbar style="height:100%">
      <div class="shop-container"> -->
      <template v-if="shopList.length">
        <div class="ii-wrap-shop-list two" v-for="(item,key) in shopList" :key="key">
          <div class="ii-wrap-shop-item img">
            <div class="shop-img">
              <!-- <img :src="item.mainUrl"> -->
              <img v-lazy="item.mainUrl" :key="item.mainUrl">
            </div>
          </div>
          <div class="ii-wrap-shop-item name">
            <p :title="item.skuName">{{item.skuName}}</p>
          </div>
          <div class="ii-wrap-shop-item legend">
            <p>{{item.categoryName}}</p>
          </div>
          <div class="ii-wrap-shop-item save">
            <p :title="item.skuStock">{{item.skuStock}}</p>
          </div>
          <div class="ii-wrap-shop-item price">
            <div class="plat-price">￥{{item.price}}</div>
          </div>
          <div class="ii-wrap-shop-item commission">
            <div class="plat-commission">￥{{item.commission}}</div>
          </div>
          <div class="ii-wrap-shop-item sale">
            <div class="plat-sale">{{item.volume}}</div>
          </div>
          <div class="ii-wrap-shop-item status">
            <div class="sale-status" v-show="item.auditStatus == '审核通过'">
              <span :class="shelfFontColor(item.shelfStatus)">{{item.shelfStatus}}</span>
            </div>
          </div>
          <div class="ii-wrap-shop-item goods-status" v-show="item.auditStatus == '待审核' || item.auditStatus == '审核待修改'">
            <div class="plat-goods" :class="goodsStatus(item.auditStatus)">{{item.auditStatus}}</div>
          </div>
          <div class="ii-wrap-shop-item platform">
            <div class="platform">{{item.platformName}}</div>
          </div>
          <div class="ii-wrap-shop-item account-name">
            <div class="account" :title="item.sellerNick">{{item.sellerNick}}</div>
          </div>
          <div class="ii-wrap-shop-item operation">
            <div class="btn-operation">
              <div class="btn-edit" :class="{'btn-active':btnIndex === key && editIndex === 1}" v-show = "item.auditStatus !== '待审核'" @click="clickPalt(key,1,item.plGoodsID)">编辑</div>
              <!-- <div class="btn-edit" :class="{'btn-active':btnIndex === key && editIndex === 2}" @click="clickPalt(key,2)">抖音</div> -->
              <!-- <div class="btn-edit" :class="{'btn-active':btnIndex === key && editIndex === 3}" @click="clickPalt(key,3)">淘宝</div> -->
            </div>
          </div>
        </div>
      </template>
      <div class="no-wrap" v-else>暂无数据</div>
      <!-- </div>
      </el-scrollbar> -->
    
      <div class="pagination"  v-show = "total > 0">
        <el-pagination
          background
          :current-page = "pageNum"
          @current-change="changeCurrentPage"
          :page-sizes="[8,16,24]"
          @size-change="changeCurrentPageSize"
          :total = "total"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
        <div class="pageSearch" @click="pageSearch">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async fetch({store}) {
    await store.commit('setPlatPreview', 1)
  },
  layout: 'intermulti',
  data(){
    return{
      selectIndex: 0,
      selectList:[//上下架(1上架 0下架)
        {name:'全部',id:''},
        {name:'上架',id:'1'},
        {name:'下架',id:'0'},
      ],
      boxShow:false,
      btnPlat:['快手','抖音','淘宝'],
      bgIndex:0,//控制显示背景
      btnIndex:0,//控制点击切换按钮的状态
      editIndex:null,//编辑按钮索引
      editText:null,//控制上架还是下架的文字
      shopList:[],//商品列表
      shelfStatus:'',//上下架(1上架 0下架)
      title:'', // 搜索商品名
      pageNum:1, //第一页
			pageSize:8, //每页的条数
      total:0, //总条数
      loading:false, //页面加载效果
      ksAccount:{},
      test:"",
    }
  },
  computed:{
    multiPlat(){
      return  this.$store.state.multiPlat
    },
    shelfFontColor(){ //判断上架还是下架的字体颜色
      return function(status){ 
        return {
          'top-shelf': status === '已上架',
          'bottom-shelf':status === '已下架'
        }
      }
    },
    goodsStatus(){
      return function(status){
        return {
          'top-shelf': status === '审核通过',
          'bottom-shelf':status === '审核待修改'
        }
      }
    }
  },
  methods:{
    changeCurrentPage(page){ //改变当前页数
      this.pageNum = page; //赋值给当前页
      this.getData(); //调用商品列表接口
      this.$scrollTo();
    },
    changeCurrentPageSize(pageSize){ //改变条数
      this.pageNum = 1; //重新请求第一页
      this.pageSize = pageSize;  //设置条数
      this.getData();//调用商品列表接口
      this.$scrollTo();
    },
    pageSearch(){ //点击确定按钮时候调用分页事件
      this.getData();//调用商品列表接口
      this.$scrollTo();
		},
    toggleIndex(index){
      if(index===0){
        this.go('/multiPlat')
      }
    },
    selectItem(item,index) {
      this.selectIndex = index;
      this.pageNum = 1;
      this.shelfStatus = item.id;
      this.getData();
    },
    showList(){
      this.boxShow = !this.boxShow
    },
    clickBtn(index){
      this.bgIndex = index
    },
    clickPalt(key,index,id){//控制编辑按钮
      this.btnIndex = key;
      this.editIndex = index;
      this.$router.push({
        path:'/multiPlat/editgoods',
        query:{ksItemId:id,shopId:this.ksAccount.shopId}
      })
    },
    // 点击搜索
    search() {
      this.pageNum = 1;
      this.getData();
      this.$scrollTo();
    },
    // 添加商品
    add() {

    },
    //获取商品列表
    getData(){
      // this.loading = true;
      let test = "";
      let params ={
        pageNum: this.pageNum, //页数
        pageSize: this.pageSize, //每页的条数
        shelfStatus: this.shelfStatus,// 上架下架
        title: this.title, // 商品名
      }
      this.$axios.$post('ksMerchantItemList',params).then(res => {
        // this.loading = false;
        if(res.status === 200 ){
          this.shopList = res.obj.list;
          this.total = res.obj.total; //未来拿到总条数
        }else{
          if(this.test){
            this.test.close()
          }
          this.test =  this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        if(this.test){
          this.test.close()
        }
        this.test = this.$message.warning('请求失败');
        // this.loading = false;
      })
    }
  },
  mounted(){
    this.getData();
    this.ksAccount = localStorage.getItem('ksAccount') ? JSON.parse(localStorage.getItem('ksAccount')):{}; //拿到商品ID
  }
}
</script>

<style scoped>
/* 左边 */
  .ii-wrap{
    min-width: 1200px;
    margin:0 0 20px 0;
    display: flex;
    justify-content: space-between;
  }
  .ii-wrap-left-l{
    background: #fff;
    width: 220px;
    border-radius: 4px;
    font-weight: bold;
    box-shadow:0 -4px 5px #f4f4f4;
  }
  .ii-wrap-left-one{
    height: 50px;
    border-bottom: 1px solid #f4f4f4;
    line-height: 50px;
    padding-left: 30px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    position: relative;
    user-select: none;
    font-weight:bold;
  }
  .ii-line-active::before {
    content: '';
    width: 3px;
    height: 26px;
    background: #0096e6;
    position: absolute;
    left: 0;
    top: 12px;
  }
  .ii-text-active{
    color: #0096e6 !important;
  }
  /* 右边 */
  .ii-wrap-right-r{
    flex:1;
    padding:20px 20px 0px;
    min-width:940px;
    background:#ffffff;
    box-sizing:border-box;
    border-radius:4px;
    margin:20px;
  }
  .ii-wrap-shop-header{
    height:30px;
    line-height:30px;
    text-align:center;
    display:flex;
    align-items:center;
    color:#666666;
    font-weight:400;
  }
  .ii-wrap-search{
    display:flex;
  }
  .ii-wrap-search-right{
    margin-left:12px;
    width: 255px;
    height: 30px;
    text-indent: 10px;
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    border-radius:4px;
  }
  .ii-wrap-search-right:focus{
    border: 1px solid #0096e6;
  }
  input::-webkit-input-placeholder{
		color:#C0C4CC;
	}
	input::-moz-input-placeholder{
		color:#C0C4CC;
	}
	input:-ms-input-placeholder{
		color:#C0C4CC;
	}
  .ii-wrap-shop-status{
    height:30px;
    display:flex;
    margin-left:40px;
  }
  .ii-wrap-select-status{
    width: 113px;
    height: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    text-indent:12px;
  }
  .ii-wrap-status-text{
    margin-right:12px;
    height:30px;
    line-height:30px;
  }
  .ii-wrap-select-status img{
    width: 11px;
    height: 6px;
    margin-right: 8px;
    transition: all .2s;
    user-select: none;
  }
  .select-status-list{
    font-size: 14px;
    color: #333;
    width: 113px;
    height: 90px;
    border-radius: 4px;
    background: #fff;
    position: absolute;
    z-index: 2;
    top: 34px;
    left: 0;
    box-shadow: 0px 1px 5px #888888;
    user-select: none;
  }
  .select-active{
    border:1px solid #409eff;
  }
  .select-status-item{
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    background: #fff;
    text-align: left;
  }
  .select-status-item:hover{
    background: #ebf7fd
  }
  .gs-xlimg {
    transform: rotate(-180deg)
  }
  .ii-wrap-btn-search{
    display:flex;
    height:30px;
    margin-left:80px;
  }
  .ii-wrap-btn{
    width: 100px;
    height: 30px;
    background:#0096e6;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border-radius: 100px;
    cursor: pointer;
  }
  .ii-wrap-btn:nth-child(2){
    margin-left:23px;
  }
  .ii-wrap-btn:hover{
    background:#66B1FF; 
  }
  .ii-wrap-shop-content{
    margin-top:30px;
  }
  .ii-wrap-shop-list{
    display:flex;
    align-items:center;
    text-align:center;
  }
  .ii-wrap-shop-content .one{
    height:30px;
    font-weight:400;  
  }
  .ii-wrap-shop-content .two{
    height:146px;
  }
  .ii-wrap-shop-list:nth-child(odd){
    background: #f8f9fb;
  }
  /* 设置标题宽度 */
  .ii-wrap-shop-content .img{
    width:11.08%;
    white-space: nowrap;
  }
  .ii-wrap-shop-content .name{
    width:13.97%;
    white-space: nowrap;
  }
  .ii-wrap-shop-content .legend{
    width:6.8%;
    white-space: nowrap;
  }
  .ii-wrap-shop-content .save{
    width:7.5%;
    white-space: nowrap;
  }
  .ii-wrap-shop-content .price{
    width:8.2%;
    white-space: nowrap;
  }
  .ii-wrap-shop-content .commission{
    width:8.2%;
    white-space: nowrap;
  }
  .ii-wrap-shop-content .sale{
    width:8.2%;
    white-space: nowrap;
  }
  .ii-wrap-shop-content .sale,.ii-wrap-shop-content .price{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .ii-wrap-shop-content .status{
    width:8.2%;
    white-space: nowrap;
  }
  .ii-wrap-shop-content .goods-status {
    width:8.2%;
    white-space: nowrap;
  }
  .ii-wrap-shop-content .platform {
    width: 8.2%;
    white-space: nowrap;
  }
  .ii-wrap-shop-content .account-name {
    width:8.2%;
    white-space: nowrap;
  }
  .ii-wrap-shop-content .operation{
    width:9%;
    white-space: nowrap;
  }
  .ii-wrap-shop-content .account-name .account{
    width:100px;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  @media screen and (max-width:1200px){
    .ii-wrap-shop-content .account-name .account{
      width:80px;
    }
  }
  @media screen and (min-width:1200px) and (max-width:1366px){
    .ii-wrap-shop-content .account-name .account{
      width:80px;
    }
  }
  .ii-wrap-shop-content .commission,
  .ii-wrap-shop-content .sale,
  .ii-wrap-shop-content .status,
  .ii-wrap-shop-content .goods-status,
  .ii-wrap-shop-content .platform,
  .ii-wrap-shop-content .account-name,
  .ii-wrap-shop-content .operation{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .ii-wrap-shop-content .name p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    width: 150px;
  }
  .ii-wrap-shop-content .save p{  
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .ii-wrap-shop-content .price div{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;;
  }
  .ii-wrap-shop-item{
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .ii-wrap-shop-item p{
    height:15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }
  .ii-wrap-shop-item .shop-img{
    width:80px;
    height:80px;
  }
  .ii-wrap-shop-item .shop-img img{
    width:100%;
    height:100%;
  }
  .plat-price:nth-child(even),
  .plat-commission:nth-child(even),
  .plat-sale:nth-child(even),
  .sale-status:nth-child(even),
  .platform:nth-child(even),
  .plat-goods:nth-child(even){
    text-align:center;  
  }
  .top-shelf{
    color: #20ba39;
  }
  .bottom-shelf{
    color:#e73547;
  }
  .btn-operation .btn-edit{
    width: 70px;
    height: 28px;
    color: #0096e6;
    text-align: center;
    text-indent:20px;
    line-height: 28px;
    border-radius: 15px;
    cursor: pointer;
    user-select: none;
    background:url(~assets/images/edit.png) no-repeat 8px 8px;
    background-color:#f0f9fe;
  }
  .btn-operation .btn-edit:hover{
    background:url(~assets/images/edit-active.png) no-repeat 8px 8px;
    z-index:1000;
    background-color:#0096e6;
    color:#fff;
  }
  .btn-operation .btn-active{
    background:url(~assets/images/edit-active.png) no-repeat 8px 8px;
    z-index:1000;
    background-color:#0096e6;
    color:#fff;
  }
  /* 分页样式 */
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:20px 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background:#0096e6;
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin:0 10px;
    user-select:none;
  }
   /* table表格的暂无数据 */
  .no-wrap{
    height:60px;
    line-height: 60px;
    text-align:center;
    font-size: 14px;
    color: #909399;
    border:1px solid #EBEEF5 ;
    margin-bottom:20px;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#0096e6;
  }
</style>
